<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/common.css">
<link rel="stylesheet" href="stylesheets/waterDetail.css">
</head>
<body>
	<div class="pageTitle" id="companyname"></div>
	<div class="pageTitle" id="getdatetime"></div>
	<div id="body">
		<ul class="listStyle">
			<li>计划总收入/万元<span id="planTotalIncome">￥</span></li>
			<li>实际总收入/万元<span id="factTotalIncome">￥</span></li>
			<li>计划总支出/万元<span id="planTotalPay">￥</span></li>
			<li>实际总支出/万元<span id="factTotalPay">￥</span></li>
		</ul>
		<div class="incomeDetails">
			<div class="mark-icon">
				<span class="mark-icon-line"></span> <img
					src="images/incomeDetail.png" alt="">
			</div>
			<div id="incomePie"></div>
			<p id="inIntro" class="intro">
				<span class="span-left">单位：/万元</span><span class="span-right"
					id="factTotalIncome1">合计：</span>
			</p>
			<ul id="incomeText" class="balanceDetail"></ul>
		</div>
		<div class="incomeDetails">
			<div class="mark-icon">
				<span class="mark-icon-line"></span> <img
					src="images/outcomeDetail.png" alt="">
			</div>
			<div id="outcomePie"></div>
			<p id="outIntro" class="intro">
				<span class="span-left">单位：/万元</span><span class="span-right"
					id="factTotalPay1">合计：</span>
			</p>
			<ul id="outcomeText" class="balanceDetail"></ul>
		</div>
	</div>
</body>

<script type="text/javascript" src="javascripts/echarts.min.js"></script>
<script>
var app;
var page;
var deviceone;
var nf;
var config;
var cache;
var pagepar;
var do_DateTimePicker;
var tools;
var do_ALayout_root;
var do_datetime;
window.onDeviceOneLoaded = function() {
	nf = sm("do_Notification");
	app = sm("do_App");
	page = sm("do_Page");
	do_DateTimePicker=sm("do_DateTimePicker");
    deviceone = require("deviceone");
    config = require("config");
    tools=require("tools");
    cache=sm("do_DataCache");
    pagepar=page.getData(); 
    do_ALayout_root=ui("do_ALayout_root"); 
    do_datetime=ui("do_datetime");
    document.getElementById("companyname").innerHTML=pagepar.companyname;
    var datetime=do_datetime.tag;
    var crrtime=new Date();
    if(datetime){
    	crrtime=new Date(datetime);
    	document.getElementById("getdatetime").innerHTML=tools.getTimeText(crrtime);
    }
    else{    	
    	document.getElementById("getdatetime").innerHTML=tools.getTimeText(crrtime);
    }    
    var IncomeList;
    var PayList;
    var data=do_ALayout_root.tag;  
    if(data =="") {
    	 document.getElementById("body").innerHTML="";
    }
    else{
    		data=JSON.parse(data);    	   
    		document.getElementById("planTotalIncome").innerHTML="￥"+(data.plantotalincome/10000).toFixed(2);
    		document.getElementById("factTotalIncome").innerHTML="￥"+(data.facttotalincome/10000).toFixed(2);
    		document.getElementById("factTotalIncome1").innerHTML="￥"+(data.facttotalincome/10000).toFixed(2);
    		document.getElementById("planTotalPay").innerHTML="￥"+(data.plantotalpay/10000).toFixed(2);
    		document.getElementById("factTotalPay").innerHTML="￥"+(data.facttotalpay/10000).toFixed(2);
    		document.getElementById("factTotalPay1").innerHTML="￥"+(data.facttotalpay/10000).toFixed(2);
    		IncomeList=data.IncomeList;
    		PayList=data.PayList;
    		IncomeList.forEach(function(ele,i){
    			ele.id=i;
    		});
    		PayList.forEach(function(ele,i){
    			ele.id=i;
    		});		
    		 option(IncomeList);
    		 optionout(PayList);
    }
 
function option(IncomeList){
	var CanvasHeight = 360 + IncomeList.length * 33;
	document.getElementById('incomePie').style.height=CanvasHeight+"px";
	var inChart = echarts.init(document.getElementById('incomePie'));
	var option = {
    legend: {
        orient: 'vertical',
        top: 360,
        width: '20%',
        itemGap: 15,
        padding: 10,
        itemWidth: 18,
        itemHeight: 18,
        selectedMode: false,
        textStyle: {
            fontSize: 14
        },
        data: IncomeList
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['35', '145'],
            center: ['50%', '155'],
            avoidLabelOverlap: true,
            label: {
                normal: {
                    show: true
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        position: 'inner',
                        formatter: function (params) {
                            return (params.percent - 0).toFixed(0) + '%'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            data: IncomeList
        }
    ],
    animation: false
	};
	 inChart.setOption(option);	
	 var inliLIst='';
	   for(var i=0;i<IncomeList.length;i++){
	       inliLIst+='<li data-id="'+IncomeList[i].id+'">￥'+(IncomeList[i].value/10000).toFixed(2)+'</li>'
	   }
	   document.getElementById("incomeText").innerHTML=inliLIst;
};
function optionout(PayList){
	var CanvasHeight2 = 360 + PayList.length * 33;
	document.getElementById('outcomePie').style.height=CanvasHeight2+"px";
	var outChart = echarts.init(document.getElementById('outcomePie'));
    var optionout = {
	       legend: {
	           orient: 'vertical',
	           top: 360,
	           width: '20%',
	           itemGap: 15,
	           padding: 10,
	           itemWidth: 18,
	           itemHeight: 18,
	           selectedMode: false,
	           textStyle: {
	               fontSize: 14
	           },
	           data: PayList
	       },
	       series: [
	           {
	               name: '访问来源',
	               type: 'pie',
	               radius: ['35', '145'],
	               center: ['50%', '155'],
	               avoidLabelOverlap: true,
	               label: {
	                   normal: {
	                       show: true
	                   }
	               },
	               labelLine: {
	                   normal: {
	                       show: false
	                   }
	               },
	               itemStyle: {
	                   normal: {
	                       label: {
	                           position: 'inner',
	                           formatter: function (params) {
	                               return (params.percent - 0).toFixed(0) + '%'
	                           }
	                       },
	                       labelLine: {
	                           show: false
	                       }
	                   }
	               },
	               data: PayList
	           }
	       ],
	       animation: false
	   };
	outChart.setOption(optionout);
	 var outliLIst='';
	   for(var i=0;i<PayList.length;i++){
	       outliLIst+='<li data-id="'+PayList[i].id+'">￥'+(PayList[i].value/10000).toFixed(2)+'</li>'
	   }
	   document.getElementById("outcomeText").innerHTML=outliLIst;
};
page.on("reloadresult",function(){
	window.location.reload();
});
};  
document.getElementById("getdatetime").onclick=function(){
	var nowdate=new Date();
	var olddate=nowdate.getTime();
	app.fire("tologin",{times:olddate,pagesize:3});
	var feedbackTime=new Date();
	do_DateTimePicker.show({
		type:1, //只显示日期
		maxDate:feedbackTime.getTime(),
		data:feedbackTime.getTime(), 
		title:"设置日期"},
		function(data, e){
			if (data.flag==1){
				feedbackTime.setTime(data.time);
				do_datetime.tag=feedbackTime;
				 document.getElementById("getdatetime").innerHTML=tools.getTimeText(feedbackTime);				 
				page.fire("reload",feedbackTime);
			}
		}
	);
};
</script>
</html>